<template>
    <div class="app-container" style="padding: 5px;">
        <el-card style="margin-bottom: 5px;">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="110px" label-position="top">
                <el-form-item label="数据类型" prop="statu">
                    <el-select v-model="queryParams.status" style="width: 250px;" filterable @change="changeParams">
                        <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="一级部门" prop="bigDepts">
                    <el-select v-model="queryParams.bigDepts" style="width: 250px;" filterable @change="changeParams">
                        <el-option
                            v-for="item in bigDeptsList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="二级部门" prop="subDepts">
                    <el-select v-model="queryParams.subDepts" style="width: 250px;" filterable @change="changeParams">
                        <el-option
                            v-for="item in subDeptsList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="产品大类" prop="brands">
                    <el-select v-model="queryParams.brands" style="width: 250px;" filterable @change="changeParams">
                        <el-option
                            v-for="item in brandsList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="年度" prop="years">
                    <el-select v-model="queryParams.years" style="width: 200px;" filterable @change="changeParams">
                        <el-option
                            v-for="item in yearsList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="middle" style="margin-top: 40px;" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="middle" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">周会播报-{{ bigDeptLabel }}-{{ queryParams.years }}年-{{ brandsLabel='all'?'全部品种':brandsLabel }}</span>
            </div>
            <el-row>
            <el-col :span="6">
                    <el-card style="height:150px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">预计出库</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px;">{{ Number(summaryInfo.yjjdmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.yjjdqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            <el-col :span="6">
                    <el-card style="height:150px;margin-left: 5px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">预计待出库</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px">{{ Number(summaryInfo.yjdckmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.yjdckqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            <el-col :span="6">
                    <el-card style="height:150px;margin-left: 5px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">年度出库</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px">{{ Number(summaryInfo.nckmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.nckqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            <el-col :span="6">
                    <el-card style="height:150px;margin-left: 5px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">年度接单</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px">{{ Number(summaryInfo.njdmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.njdqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            </el-row>
            <el-row>
            <el-col :span="6">
                    <el-card style="height:150px;margin-top: 5px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">月度出库</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px">{{ Number(summaryInfo.yckmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.yckqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            <el-col :span="6">
                    <el-card style="height:150px;margin-top: 5px;margin-left: 5px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">月度接单</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px">{{ Number(summaryInfo.yjdmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.yjdqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            <el-col :span="6">
                    <el-card style="height:150px;margin-top: 5px;margin-left: 5px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">周出库</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px">{{ Number(summaryInfo.zckdmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.zckqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            <el-col :span="6">
                    <el-card style="height:150px;margin-top: 5px;margin-left: 5px;">
                        <div slot="header" class="clearfix">
                            <center><span style="font-weight: bold;color: #0099ff;font-size: 16px;">周接单</span></center>
                        </div>
                        <el-descriptions :column="1" border style="margin-top: -7px;">
                            <el-descriptions-item>
                            <template slot="label">
                                    <i class="el-icon-coin" style="color:gold;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">金额</span>
                                </template>
                                <span style="color:red;font-weight: bold;font-size: 16px">{{ Number(summaryInfo.zjdmoney).toFixed(2) | formatCurrency }}万</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-document-copy" style="color:blue;font-size: 20px;"></i>
                                    <span style="font-weight: bold;margin-left: 5px;">数量</span>
                                </template>
                                <span style="font-weight: bold;color: black;font-size: 16px">{{ Number(summaryInfo.zjdqty).toFixed(2) | formatCurrency1 }}万</span>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
            </el-col>
            </el-row>
        </el-card>
        <el-row>
            <el-col :span="16">
                <el-card style="margin-top: 5px;">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">当周接单明细-{{ bigDeptLabel }}</span>
                    </div>
                    <el-table :data="weekDetailList" border stripe :span-method="rowSpanMethod1" height="500">
                        <el-table-column label="周" align="center" prop="wk_year" width="240" ></el-table-column>
                        <!-- <el-table-column label="公司" align="center" prop="company" width="240"></el-table-column> -->
                        <el-table-column label="一级分类" align="center" prop="brand" ></el-table-column>
                        <el-table-column label="二级分类" align="center" prop="bigname" width="100" ></el-table-column>
                        <el-table-column label="数量" align="center" prop="qty" >
                            <template slot-scope="scope">
                                {{ Number(scope.row.qty) | formatCurrency2 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="金额" align="center" prop="money" >
                            <template slot-scope="scope">
                                {{ Number(scope.row.money).toFixed(2) }}万
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="margin-top: 5px;">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">当周接单大品类占比-{{ bigDeptLabel }}</span>
                    </div>
                    <div ref="chart5" style="width: 100%; height: 500px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-card style="margin-top: 5px;height:500px;">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ queryParams.years }}年-二级部门-{{ statusLabel }}-排名及占比</span>
                    </div>
                    <div ref="chart1" style="width: 100%; height: 480px;"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card style="margin-top: 5px;height:500px;margin-left: 5px;">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ queryParams.years }}年-大品类-{{ brandsLabel='all'?'全部品种':brandsLabel }}-{{ statusLabel }}-排名及占比</span>
                    </div>
                    <div ref="chart2" style="width: 100%; height: 480px;"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-card style="margin-top: 5px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;">{{ queryParams.years }}年-{{ brandsLabel='all'?'全部品种':brandsLabel }}-{{ statusLabel }}-明细</span>
            </div>
            <el-table :data="detailList" border stripe :span-method="rowSpanMethod">
                <el-table-column label="年度" align="center" prop="y_year" ></el-table-column>
                <el-table-column label="一级部门" align="center" prop="dpt1" ></el-table-column>
                <el-table-column label="二级部门" align="center" prop="dpt2" ></el-table-column>
                <el-table-column label="业务人员" align="center" prop="salename"  />
                <el-table-column label="自产苗" align="center">
                    <el-table-column label="数量" align="center" prop="zcmqty" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.zcmqty==0"></span>
                            <span v-if="scope.row.zcmqty!=0">{{ Number(scope.row.zcmqty).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center" prop="zcmmoney" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.zcmmoney==0"></span>
                            <span v-if="scope.row.zcmmoney!=0">{{ Number(scope.row.zcmmoney).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="洋桔梗" align="center">
                    <el-table-column label="数量" align="center" prop="yjgqty" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.yjgqty==0"></span>
                            <span v-if="scope.row.yjgqty!=0">{{ Number(scope.row.yjgqty).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center" prop="yjgmoney" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.yjgmoney==0"></span>
                            <span v-if="scope.row.yjgmoney!=0">{{ Number(scope.row.yjgmoney).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="洋牡丹" align="center">
                    <el-table-column label="数量" align="center" prop="ymdqty" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.ymdqty==0"></span>
                            <span v-if="scope.row.ymdqty!=0">{{ Number(scope.row.ymdqty).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center" prop="ymdmoney" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.ymdmoney==0"></span>
                            <span v-if="scope.row.ymdmoney!=0">{{ Number(scope.row.ymdmoney).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="其他" align="center">
                    <el-table-column label="数量" align="center" prop="qtqty" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.qtqty==0"></span>
                            <span v-if="scope.row.qtqty!=0">{{ Number(scope.row.qtqty).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="金额" align="center" prop="qtmoney" >
                        <template slot-scope="scope">
                            <span v-if="scope.row.qtmoney==0"></span>
                            <span v-if="scope.row.qtmoney!=0">{{ Number(scope.row.qtmoney).toFixed(2) }}万</span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 5px;height:600px;">
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;color: #0099ff;font-size: 16px;"><span style="color:red;">{{queryParams.years}}</span>-自产苗各月实际&预计出库数据与预算对比</span>
            </div>
            <div ref="chart3" style="width: 100%; height: 260px;"></div>
            <div ref="chart4" style="width: 100%; height: 260px;"></div>
        </el-card>
    </div>
</template>

<script>
import { listDictData,listSummaryData,listSubDeptSummary,listBrandSummary,listDetailSummary,listBugetSummary,listWeekDetailSummary } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';

export default {
  name: "YsdataDash",
  data() {
    return {
        statusList: [],
        bigDeptsList: [],
        subDeptsList: [],
        brandsList: [],
        yearsList: [],
        detailList: [],
        weekDetailList: [],
        statusLabel: null,
        bigDeptLabel: null,
        brandsLabel: null,
        queryParams: {
            status: null,
            bigDepts: null,
            subDepts: null,
            brands: null,
            years: null,
        },
        summaryInfo: {
            nckmoney:0,
            nckqty:0,
            njdmoney:0,
            njdqty:0,
            yckmoney:0,
            yckqty:0,
            yjdckmoney:0,
            yjdckqty:0,
            yjdmoney:0,
            yjdqty:0,
            yjjdmoney:0,
            yjjdqty:0,
            zckdmoney:0,
            zckqty:0,
            zjdmoney:0,
            zjdqty:0,
        }
    }
  },
  filters: {
    formatCurrency(value) {
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(value);
    },
    formatCurrency1(value) {
      return new Intl.NumberFormat('zh-CN', {
        currency: 'CNY',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(value);
    },
    formatCurrency2(value) {
      return new Intl.NumberFormat('zh-CN', {
        currency: 'CNY',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
      }).format(value);
    }
  },
  created() {
    const now = new Date();
    this.queryParams.status = "y出库";
    this.queryParams.bigDepts = "0000";
    this.queryParams.subDepts = "all";
    this.queryParams.brands = "all";
    this.queryParams.years = now.getFullYear();
    this.getDictData();
    this.getSummary();
    this.getSubDeptSummary();
    this.getBrandSummary();
    this.getDetailSummary();
    this.getBugetSummary();
    this.getWeekDetailSummary();
  },
  mounted(){

  },
  methods: {
    rowSpanMethod1({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
            if (rowIndex === 0 || this.weekDetailList[rowIndex - 1].wk_year !== row.wk_year) {
                // 计算连续相同 ID 的行数
                let rowspan = 1;
                while (rowIndex + rowspan < this.weekDetailList.length && this.weekDetailList[rowIndex + rowspan].wk_year === row.wk_year) {
                    rowspan++;
                }
                return { rowspan, colspan: 1 };
            } else {
                return { rowspan: 0, colspan: 0 };
            }
        }
        // if (columnIndex === 1) {
        //      if (rowIndex === 0 || this.weekDetailList[rowIndex - 1].company !== row.company) {
        //         // 计算连续相同 ID 的行数
        //         let rowspan = 1;
        //         while (rowIndex + rowspan < this.weekDetailList.length && this.weekDetailList[rowIndex + rowspan].company === row.company) {
        //             rowspan++;
        //         }
        //         return { rowspan, colspan: 1 };
        //     } else {
        //         return { rowspan: 0, colspan: 0 };
        //     }
        // }
        if (columnIndex === 1) {
             if (rowIndex === 0 || this.weekDetailList[rowIndex - 1].brand !== row.brand) {
                // 计算连续相同 ID 的行数
                let rowspan = 1;
                while (rowIndex + rowspan < this.weekDetailList.length && this.weekDetailList[rowIndex + rowspan].brand === row.brand) {
                    rowspan++;
                }
                return { rowspan, colspan: 1 };
            } else {
                return { rowspan: 0, colspan: 0 };
            }
        }
    },
    rowSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
            if (rowIndex === 0 || this.detailList[rowIndex - 1].y_year !== row.y_year) {
                // 计算连续相同 ID 的行数
                let rowspan = 1;
                while (rowIndex + rowspan < this.detailList.length && this.detailList[rowIndex + rowspan].y_year === row.y_year) {
                    rowspan++;
                }
                return { rowspan, colspan: 1 };
            } else {
                return { rowspan: 0, colspan: 0 };
            }
        }
        if (columnIndex === 1) {
             if (rowIndex === 0 || this.detailList[rowIndex - 1].dpt1 !== row.dpt1) {
                // 计算连续相同 ID 的行数
                let rowspan = 1;
                while (rowIndex + rowspan < this.detailList.length && this.detailList[rowIndex + rowspan].dpt1 === row.dpt1) {
                    rowspan++;
                }
                return { rowspan, colspan: 1 };
            } else {
                return { rowspan: 0, colspan: 0 };
            }
        }
        if (columnIndex === 2) {
             if (rowIndex === 0 || this.detailList[rowIndex - 1].dpt2 !== row.dpt2) {
                // 计算连续相同 ID 的行数
                let rowspan = 1;
                while (rowIndex + rowspan < this.detailList.length && this.detailList[rowIndex + rowspan].dpt2 === row.dpt2) {
                    rowspan++;
                }
                return { rowspan, colspan: 1 };
            } else {
                return { rowspan: 0, colspan: 0 };
            }
        }
    },
    changeParams(){
        this.handleQuery();
    },
    handleQuery(){
        this.getSummary();
        this.getSubDeptSummary();
        this.getBrandSummary();
        this.getDetailSummary();
        this.getBugetSummary();
        this.getWeekDetailSummary();
        const status = this.statusList.find(item => item.value === this.queryParams.status);
        this.statusLabel = status ? status.label : '';
        const bigDept = this.bigDeptsList.find(item => item.value === this.queryParams.bigDepts);
        this.bigDeptLabel = bigDept ? bigDept.label : '';
        const brand = this.brandsList.find(item => item.value === this.queryParams.brands);
        this.brandsLabel = brand ? brand.label : '';
    },
    resetQuery(){
        const now = new Date();
        this.queryParams.status = "y出库";
        this.queryParams.bigDepts = "0000";
        this.queryParams.subDepts = "all";
        this.queryParams.brands = "all";
        this.queryParams.years = now.getFullYear();
        this.getSummary();
    },
    getWeekDetailSummary(){
        listWeekDetailSummary(this.queryParams).then(res =>{
            this.weekDetailList = res.data.list;
            const chart = echarts.init(this.$refs.chart5);
            const option = {
                title: {
                    text: '总数量：'+res.data.total[0].qty+",总金额："+res.data.total[0].money+"万",
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                        // 根据系列名或其它条件判断数据所属层级
                        if (params.seriesName === "数量") {
                            return params.name + "-数量<br/>" + params.value + "(" + params.percent + "%)<br/>";
                        } else if (params.seriesName === "金额") {
                            return params.name + "-金额<br/>" + params.value + "万(" + params.percent + "%)<br/>";
                        }
                    }
                },
                toolbox: {
                    feature: {
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                // legend: {
                //     data: res.data.labels
                // },
                series: [
                    {
                        name: '数量',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        label: {
                            position: 'inner',
                            fontSize: 12,
                            formatter: '{b}: {c}'
                        },
                        labelLine: {
                            show: false
                        },
                        data: res.data.brand.map(item => ({
                            value: item.qty,
                            name: item.brand,
                        })),
                    },
                    {
                        name: '金额',
                        type: 'pie',
                        radius: ['45%', '60%'],
                        labelLine: {
                            length: 30,
                            show: false
                        },
                        label: {
                            position: 'inner',
                            fontSize: 12,
                            formatter: '{b}: {c}万'
                        },
                        // label: {
                        //     formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c} {per|{d}%}  ',
                        //     backgroundColor: '#F6F8FC',
                        //     borderColor: '#8C8D8E',
                        //     borderWidth: 1,
                        //     borderRadius: 4,
                        //     rich: {
                        //     a: {
                        //         color: '#6E7079',
                        //         lineHeight: 22,
                        //         align: 'center'
                        //     },
                        //     hr: {
                        //         borderColor: '#8C8D8E',
                        //         width: '100%',
                        //         borderWidth: 1,
                        //         height: 0
                        //     },
                        //     b: {
                        //         color: '#4C5058',
                        //         fontSize: 14,
                        //         fontWeight: 'bold',
                        //         lineHeight: 33
                        //     },
                        //     per: {
                        //         color: '#fff',
                        //         backgroundColor: '#4C5058',
                        //         padding: [3, 4],
                        //         borderRadius: 4
                        //     }
                        //     }
                        // },
                        data: res.data.brand.map(item => ({
                            value: item.money,
                            name: item.brand,
                        })),
                    }
                ]
            };
            chart.setOption(option);
        })
    },
    getSummary(){
        listSummaryData(this.queryParams).then(res =>{
            this.summaryInfo = res.data;
        })
    },
    getDetailSummary(){
        listDetailSummary(this.queryParams).then(res =>{
            this.detailList = res.data;
        })
    },
    getBugetSummary(){
        listBugetSummary(this.queryParams).then(res=>{
            const chart = echarts.init(this.$refs.chart3);
            const option = {
                title: {
                    text: '金额',
                    left: 5,  // 距离左侧 10px
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].data.extraInfo
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '7%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: res.data.labels
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '金额',
                        type: 'bar',
                        data: res.data.feeList.map(item => ({
                            value: item.achive_money,
                            name: item.month,
                            extraInfo: "年份："+item.year+"<br/> 月份："+item.month+"<br />出库金额："+item.achive_money+"万<br />年度预算金额："+item.bud_money+"万<br />金额完成度："+Number(item.money_rate).toFixed(2)+"%",
                            labelInfo: Number(item.money_rate).toFixed(2)+"%\n"+item.achive_money+"万"
                        })),
                        itemStyle: {
                            color: function(params) {
                                // 颜色数组
                                const colorList = res.data.colors;
                                // 根据数据索引返回对应颜色
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            position: 'top', // 标签位置
                            formatter: function (params) {
                                return params.data.labelInfo
                            }
                        }
                    }
                ]
            };
            chart.setOption(option);

            const chart1 = echarts.init(this.$refs.chart4);
            const option1 = {
                title: {
                    text: '数量',
                    left: 5,  // 距离左侧 10px
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].data.extraInfo
                    }
                },
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '7%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: res.data.labels
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: res.data.qtyList.map(item => ({
                            value: item.achive_qty,
                            name: item.month,
                            extraInfo: "年份："+item.year+"<br/> 月份："+item.month+"<br />出库数量："+item.achive_qty+"万<br />年度预算数量："+item.bud_qty+"万<br />数量完成度："+Number(item.qty_rate).toFixed(2)+"%",
                            labelInfo: Number(item.qty_rate).toFixed(2)+"%\n"+item.achive_qty+"万"
                        })),
                        itemStyle: {
                            color: function(params) {
                                // 颜色数组
                                const colorList = res.data.colors;
                                // 根据数据索引返回对应颜色
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            position: 'top', // 标签位置
                            formatter: function (params) {
                                return params.data.labelInfo
                            }
                        }
                    },
                ]
            };
            chart1.setOption(option1);
        })
    },
    getBrandSummary(){
        listBrandSummary(this.queryParams).then(res =>{
            const status = this.statusList.find(item => item.value === this.queryParams.status);
            const statusLabel = status ? status.label : '';
            const chart = echarts.init(this.$refs.chart2);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return params[0].data.extraInfo
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: res.data.labels,
                },
                series: [
                    {
                        type: 'bar',
                        data: res.data.list.map(item => ({
                            value: item.money,
                            name: item.brand,
                            extraInfo: "产品大类："+item.brand+"<br /> "+statusLabel+"金额占比："+item.rate+"%<br />"+statusLabel+"金额："+item.money+"万"
                        })),
                        itemStyle: {
                            color: function(params) {
                                // 颜色数组
                                const colorList = res.data.colors;
                                // 根据数据索引返回对应颜色
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            position: 'right', // 标签位置
                            formatter: '{c}万' // 标签内容格式化为数据值
                        }
                    }
                ]
            };
            chart.setOption(option);
        })
    },
    getSubDeptSummary(){
        listSubDeptSummary(this.queryParams).then(res =>{
            const status = this.statusList.find(item => item.value === this.queryParams.status);
            const statusLabel = status ? status.label : '';
            const chart = echarts.init(this.$refs.chart1);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return params[0].data.extraInfo
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: res.data.labels,
                },
                series: [
                    {
                        type: 'bar',
                        // data: res.data.datas,
                        data: res.data.list.map(item => ({
                            value: item.money,
                            name: item.dpt2,
                            extraInfo: "一级部门："+item.dpt1+"<br/>二级部门："+item.dpt2+"<br /> "+statusLabel+"金额占比："+item.rate+"%<br />"+statusLabel+"金额："+item.money+"万"
                        })),
                        itemStyle: {
                            color: function(params) {
                                // 颜色数组
                                const colorList = res.data.colors;
                                // 根据数据索引返回对应颜色
                                return colorList[params.dataIndex % colorList.length];
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            position: 'right', // 标签位置
                            formatter: '{c}万' // 标签内容格式化为数据值
                        }
                    }
                ]
            };
            chart.setOption(option);
        })
    },
    getDictData(){
        listDictData().then(res =>{
            this.statusList = res.data.statusList;
            this.bigDeptsList = res.data.bigDeptsList;
            this.subDeptsList = res.data.subDeptsList;
            this.brandsList = res.data.brandsList;
            this.yearsList = res.data.yearsList;
            const status = this.statusList.find(item => item.value === this.queryParams.status);
            this.statusLabel = status ? status.label : '';
            const bigDept = this.bigDeptsList.find(item => item.value === this.queryParams.bigDepts);
            this.bigDeptLabel = bigDept ? bigDept.label : '';
            const brand = this.brandsList.find(item => item.value === this.queryParams.brands);
            this.brandsLabel = brand ? brand.label : '';
        })
    },
  }
};
</script>
